<!-- 国家地区增改弹窗 -->

<style lang="scss" scoped>
.el-form {
  .el-form-item {
    margin: 15px 0;
  }

  .hjd-drawer__footer {
    margin-top: 50px;
  }
}
</style>

<template>
  <el-drawer
    ref="drawer"
    custom-class="hjd-drawer"
    :title="`${status === 'create' ? '新增' : '编辑'}常用数据`"
    :visible.sync="showDialog"
    :wrapper-closable="true"
    @close="$emit('update:visible', false)"
  >
    <div class="hjd-drawer__content">
      <el-form
        ref="dataForm"
        :model="form"
        label-width="100px"
        style=" margin-left:20px;margin-right:20px;"
      >
        <!-- <el-form-item label="父级">
          <el-select v-model="form.pid" placeholder="">
            <el-option label="顶级" :value="0" />
            <el-option
              v-for="item in parent"
              :key="item.cfg_id"
              :label="item.title"
              :value="item.cfg_id"
            />
          </el-select>
        </el-form-item> -->

        <el-form-item label="名称">
          <el-input v-model="form.title" />
        </el-form-item>

        <el-form-item label="名称（英文）">
          <el-input v-model="form.title_en" />
        </el-form-item>

        <el-form-item label="代码">
          <el-input v-model="form.code" />
        </el-form-item>

        <el-form-item label="介绍">
          <el-input
            v-model="form.desc"
            type="textarea"
            rows="3"
          />
        </el-form-item>

        <el-form-item
          label="是否启用"
          prop="status"
        >
          <el-switch v-model="form.status" />
        </el-form-item>

        <div class="hjd-drawer__footer">
          <el-button @click="showDialog = false">
            取消
          </el-button>
          <el-button
            type="primary"
            @click="submit"
          >
            确定
          </el-button>
        </div>

      </el-form>
    </div>
  </el-drawer>
</template>

<script>

import _ from 'lodash'

import { handleAdd, handleEdit } from '@/api/base/commonData'

export default {
  name: 'UpdateCommonDataDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: 'new'
    },
    data: {
      type: Object,
      default: () => ({})
    },

    parent: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showDialog: this.visible,

      beforeData: {},

      /**
       * 表单内容
       */
      form: {
        cfg_id: '',
        title: '',
        title_en: '',
        code: '',
        desc: '',
        model: 0,
        pid: 0,
        sort: '',
        children: [],
        status: 1
      }
    }
  },

  created() {
    this.beforeData = _.cloneDeep(this.data)
    if (this.status === 'update') {
      this.form = _.cloneDeep(this.data)
    }
  },

  methods: {
    submit() {
      // 数据没改动 直接关闭弹窗
      if (_.isEqual(this.form, this.beforeData)) {
        this.showDialog = false
        return
      }

      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 是否是创建
          const isCreate = this.status === 'create'

          // 请求数据
          const queryData = {
            cfg_id: this.form.cfg_id,
            title: this.form.title,
            title_en: this.form.title_en,
            code: this.form.code,
            desc: this.form.desc,
            model: this.form.model,
            pid: this.form.pid,
            sort: this.form.sort,
            children: this.form.children,
            status: this.form.status
          }

          // 修改时传 ID
          if (!isCreate) queryData['country_id'] = this.form.country_id

          // 请求接口
          const request = isCreate ? handleAdd : handleEdit
          request(queryData).then(() => {
            this.data.cfg_id = this.form.cfg_id
            this.data.title = this.form.title
            this.data.title_en = this.form.title_en
            this.data.code = this.form.code
            this.data.desc = this.form.desc
            this.data.model = this.form.model
            this.data.pid = this.form.pid
            this.data.sort = this.form.sort
            this.data.children = this.form.children
            this.data.status = this.form.status
            this.showDialog = false
            this.$notify.success(isCreate ? '创建成功' : '修改成功')
            // 刷新列表
            // this.$emit('reload')
          })
        }
      })
    }
  }
}
</script>
